<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>K Sprite Sheet</title>
	<link href="tuts/index.css" rel="stylesheet" type="text/css">
</head>
	
<body">
<article>
<header>
<h1>K.SpriteSheet</h1>
<canvas id="canvas" width="770" height="480"></canvas>
<p>Example how to use K.SpriteSheet</p>
</header>

<p>K</p>
</article>

	<script src="../js/K.js"></script>
	<script>
	var cvs = document.getElementById("canvas");
	K.stage.originWidth = cvs.width;
	K.stage.originHeight = cvs.height;
	K.init(cvs);
	
	var sheet = new K.SheetData("knight");
	sheet.addAnimation("fly", false, 0, 5, true, 10, null, null);
	
	var actors = [];
	
	function step(){	
	
		var o, c, xx, yy;
		for (var i = 0; i < actors.length; i++) {
			c = false;
			o = actors[i];
			xx = o.data.vx * 2 + o.x;
			yy = o.data.vy * 2 + o.y;
			if (xx > cvs.width || xx < 0)  { o.data.vx *= -1; xx = o.x; c = true; }
			if (yy > cvs.height || yy < 0) { o.data.vy *= -1; yy = o.y; c = true; }
			if (c) {
				o.rotation = Math.atan2(o.data.vy, o.data.vx);
			}
			o.x = xx;
			o.y = yy;
			o.updateFrame();
		}
	
		K.render();
		
		window.requestAnimationFrame(step);
	}
	
	function init(){
		var i, o;
		for (i = 0; i < 6; i++) {
			o = new K.Rectangle(i * 32, 0, 32, 32);
			o.offsetX = -16;
			o.offsetY = -16;
			sheet.frames.push(o);
		}
		for (i = 0; i < 500; i++) {
			o = new K.SpriteSheet("sprite_" + i, 400, 300, sheet, "fly", Math.floor(Math.random() * 5));
			o.rotation = Math.random() * K.P360;
			o.data = {vx:Math.cos(o.rotation), vy:Math.sin(o.rotation)};
			K.stage.addChild(o);
			actors.push(o);
		}
		step();
		//K.EventManager.start();
	};
	
	sheet.image.onload = init();
	sheet.image.src = "res/flies.png";
	</script>
</body>
</html>
